<template>
  <div class="channel-edit">
    <!-- 我的频道 -->
    <div class="channel-wrap">
      <div class="title">
        <span>冠希频道</span>
        <van-button size="small" plain type="danger">编辑</van-button>
      </div>

      <van-grid>
        <van-grid-item
          v-for="item in ownChannels"
          :key="item.id"
          :text="item.name"
        />
      </van-grid>
    </div>

    <!-- 可选频道 -->
    <div class="channel-wrap">
      <div class="title">
        <span>可选频道</span>
      </div>

      <van-grid>
        <van-grid-item
          v-for="item in allChannels"
          :key="item.id"
          :text="item.name"
        />
      </van-grid>
    </div>
  </div>
</template>


<script>
export default {
  props: {
    // 接受父组件传来的自己有的频道
    ownChannels: {
      //   限制必填和类型为数组
      required: true,
      type: Array,
    },
    // 接受父组件传来的所有的频道
    allChannels: {
      //   限制必填和类型为数组
      required: true,
      type: Array,
    },
  },

  data() {
    return {};
  },
  computed: {
    // // 可选频道
    // optionalChannel() {
    //   // 过滤所有频道

    //   let res = this.allChannels.filter((value) => {
    //     // 判断当前这个元素在不在我的频道里面，在就不过滤出来
    //     // 不在就过滤出来
    //     let index = this.ownChannels.findIndex((v) => {
    //       if (v.id == value.id) return true;
    //     });

    //     // 如果下标为-1代表不存在，那么就过滤出来
    //     if (index == -1) return true;
    //     else return false;
    //   });

    //   return res;
    // },    
      // 可选频道
      optionalChannel() {
        // 过滤所有频道
        return this.allChannels.filter(
          (value) => this.ownChannels.findIndex((v) => v.id == value.id) == -1
        );
      },
    
  },
};
</script>

<style lang="less" scoped>
.channel-edit {
  padding: 0 20px;
  .channel-wrap {
    .title {
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
